<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 20px;">
    <div class="container">
        <div class="nav">
            <button class="btn btn-info" data-toggle="modal" data-target="#myModal">新增</button>
            <button class="btn btn-info" id="delete">删除</button>
            <button class="btn btn-info" id="change">编辑</button>
            <button class="btn btn-info" id="search">查询</button>
            <input type="text" name="sid" id="sid" placeholder="按工号查询">
            <input type="text" name="sname" id="sname" placeholder="按姓名查询">
            <button class="btn btn-info" id="return">返回</button>
        </div>
        <div>
            <table class="table table-striped">
                <thead>
                    <th>序号</th>
                    <th>工号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>出生日期</th>
                </thead>
                <tbody>
                    <tr>
                        <td> <input type="checkbox" class="cb"> </td>
                        <td class="gh">1001</td>
                        <td class="xm">张三</td>
                        <td>女</td>
                        <td>1234</td>
                        <td>29</td>
                        <td>1991-1-1</td>
                    </tr>
                    <tr>
                        <td> <input type="checkbox" class="cb"> </td>
                        <td class="gh">1002</td>
                        <td class="xm"">李四</td>
                        <td>男</td>
                        <td>1234</td>
                        <td>28</td>
                        <td>1992-2-2</td>
                    </tr>
                    <tr>
                        <td> <input type="checkbox" class="cb"> </td>
                        <td class="gh">1003</td>
                        <td class="xm">王五</td>
                        <td>女</td>
                        <td>1234</td>
                        <td>27</td>
                        <td>1993-3-3</td>
                    </tr>
                    <tr>
                        <td> <input type="checkbox" class="cb"> </td>
                        <td class="gh">1004</td>
                        <td class="xm">赵六</td>
                        <td>女</td>
                        <td>1234</td>
                        <td>26</td>
                        <td>1994-4-4</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal" id="myModal" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4>新增用户</h4>
                </div>
                <div class="modal-body">
                    <p>工号<input type="text" id="uid"></p>
                    <p>姓名<input type="text" id="uname"></p>
                    <p>性别<input type="text" id="usex"></p>
                    <p>密码<input type="text" id="upassword"></p>
                    <p>年龄<input type="text" id="uage"></p>
                    <p>出生日期<input type="date" id="ubirth"></p>                 
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" id="add" data-dismiss="modal">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 定义模态框，接收新增的用户信息 -->
    <div class="modal" id="myModal1" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4>编辑用户</h4>
                </div>
                <div class="modal-body">
                    <p>工号<input type="text" id="nuid"></p>
                    <p>姓名<input type="text" id="nuname"></p>
                    <p>性别<input type="text" id="nusex"></p>
                    <p>密码<input type="text" id="nupassword"></p>
                    <p>年龄<input type="text" id="nuage"></p>
                    <p>出生日期<input type="date" id="nubirth"></p>                 
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" id="change" data-dismiss="modal">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <script src="./jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script>
        $(function() {
            $("tr:gt(0):odd").addClass("warning");
            $("tr:gt(0):even").addClass("info");
        });

        // 删除行操作
        $(function() {
            $("#delete").click(function() {
                var count = 0;
                $(".cb").each( function() {
                    if ($(this).is(":checked")) {
                        count++;
                    }
                });
                if (count == 0) {
                    alert("请至少选择一个序号！");
                } else (
                    $(".cb").each(function() {
                        if($(this).is(":checked")) {
                            $(this).parents("tr").remove();
                        }
                    })
                )
            })
        });

        // 新增用户操作
        $(function() {
            $("#add").click(function() {
                var uid = $("#uid").val();
                var uname = $("#uname").val();
                var upassword = $("#upassword").val();
                var usex = $("#usex").val();
                var uage = $("#uage").val();
                var udate = $("#ubirth").val();
                $("tr:last").after("<tr></tr>");
                $("tr:last").append("<td> <input type='checkbox' class='cb'> </td>");
                $("tr:last").append("<td class='gh'>" + uid + "</td>");
                $("tr:last").append("<td class='xm'>" + uname + "</td>"); 
                $("tr:last").append("<td>" + usex + "</td>"); 
                $("tr:last").append("<td>" + upassword + "</td>"); 
                $("tr:last").append("<td>" + uage + "</td>");
                $("tr:last").append("<td>" + udate + "</td>");  
           })
        });

        // 编辑用户操作
        $(function() {
            $("#change").click(function() {
                var count2 = 0;
                $(".cb").each(function() {
                    if ($(this).is(":checked")) {
                        count2++;
                    }
                });
                if (count2 == 0) {
                    alert("请选择一行进行编辑！");
                } else {
                    $(".cb").each(function() {
                        if ($(this).is(":checked")) {
                            
                            // 定义变量存储原先的值，如果取消编辑则还原列表
                            var fid = $(this).parent().next().text();
                            var fname = $(this).parent().next().next().text();
                            var fsex = $(this).parent().next().next().next().text();
                            var fpassword = $(this).parent().next().next().next().next().text();
                            var fage = $(this).parent().next().next().next().next().next().text();
                            var fdate = $(this).parent().next().next().next().next().next().next().text();
                            $(this).parents("tr").replaceWith("<tr class='change'></tr>");

                            // 将选定行变为输入框，接收输入
                            $(".change").append("<td> <button class='confirm'><span class='glyphicon glyphicon-ok'></span></button> </td>");
                            $(".change").append("<td> <button class='cancel'><span class='glyphicon glyphicon-remove'></span></button> </td>");
                            $(".change").append("<td> <input type='text' id='nuid'> </td>");
                            $(".change").append("<td> <input type='text' id='nuname'> </td>");
                            $(".change").append("<td> <input type='text' id='nusex'> </td>");
                            $(".change").append("<td> <input type='text' id='nupassword'> </td>");
                            $(".change").append("<td> <input type='text' id='nuage'> </td>");
                            $(".change").append("<td> <input type='date' id='nubirth'> </td>");

                            // 定义确定按钮，用新的值替换原先的值
                            $(function() {
                                $(".confirm").click(function() {
                                    var nuid = $("#nuid").val();
                                    var nuname = $("#nuname").val();
                                    var nupassword = $("#nupassword").val();
                                    var nusex = $("#nusex").val();
                                    var nuage = $("#nuage").val();
                                    var nudate = $("#nubirth").val();
                                    newtr = ("<tr> <td> <input type='checkbox' class='cb'> </td> <td class='gh'>" + nuid + "</td> <td class='xm'>" + nuname + "</td>  <td>" + nusex + "</td> <td>" + nupassword + "</td> <td>" + nuage + "</td> <td>" + nudate + "</td> </tr>");
                                    $(".change").replaceWith(newtr);
                                })
                            })

                            // 定义取消按钮，还原列表的值
                            $(function() {
                                $(".cancel").click(function() {
                                    newtr = ("<tr> <td> <input type='checkbox' class='cb'> </td> <td class='gh'>" + fid + "</td> <td class='xm'>" + fname + "</td>  <td>" + fsex + "</td> <td>" + fpassword + "</td> <td>" + fage + "</td> <td>" + fdate + "</td> </tr>");
                                    $(".change").replaceWith(newtr);
                                })
                            })
                        }
                    })
                }
                
            })
        })

        
        

        // 查询操作
        $(function() {
            $("#search").click(function() {
                var count1 = 0;

                // 根据工号查询
                if ($("#sid").val() != "") {
                    var sid = $("#sid").val();
                    $(".gh").each(function() {
                        if ($(this).text() == sid) {
                            count1++;
                            $(this).parents("tr").siblings().hide();        // 查询到就把其他结果隐藏
                        }
                        
                    })
                    if (count1 == 0) {
                            alert("没有找到！");
                    }
                } else if ($("#sname").val() != "") {       // 根据姓名查询
                    var sname = $("#sname").val();
                    $(".xm").each(function() {
                        if ($(this).text() == sname) {
                            count1++;
                            $(this).parents("tr").siblings().hide();        // 查询到，就把其他结果隐藏
                        }
                        
                    })
                    if (count1 == 0) {
                            alert("没有找到！");
                    }
                } else {
                    alert("请至少输入一个查询字段！");
                }             
            })
        });

        // 返回按钮，重新显示列表
        $(function() {
            $("#return").click(function() {
                $("tr").show();
            })
        })


    </script>
    
</body>
</html>